<script setup>
// 点击登录按钮的处理函数
const tonext3 = () => {
  // 获取所有输入框元素
  const inputs = document.querySelectorAll('input')
  // 检查每个输入框是否填写
  let isEmpty = false
  // 初始化数组：存储所有未填写的字段名称
  let missingFields = []
  // 遍历每个输入框
  for (let i = 0; i < inputs.length; i++) {
    const input = inputs[i]
    // 检查输入框是否为空
    if (!input.value || input.value.trim() === '') {
      //去除字符串前后的空白字符，trim() 在这里的作用是过滤 “无效的空白输入”，确保用户确实填写了有意义的内容，让表单校验更严谨。
      // 如果输入框为空，则标记为未填写
      isEmpty = true
      // 根据索引确定字段名称
      const fieldNames = ['姓名', '职工号', '负责班级', '密码']
      // 根据索引获取字段名称
      if (i < fieldNames.length) {
        missingFields.push(fieldNames[i])
      } else {
        missingFields.push('未知字段')
      }
    }
  }

  if (isEmpty) {
    // 如果有未填写的项，显示提示
    uni.showModal({
      title: '信息不完整',//提示信息标题
      content: '请填写以下信息: ' + missingFields.join(', '),
      // 提示信息内容，.join() 方法将数组转换为字符串，并使用逗号分隔每个元素。
      showCancel: false,//是否显示取消按钮
      confirmColor: '#409EFF'//按钮颜色
    })
  } else {
    // 如果所有信息都已填写，显示确认弹窗
    uni.showModal({
      title: '确认信息',
      content: '请确认您已填写完所有信息！',
      // 提示信息内容
      success: function (res) {
        if (res.confirm) {
          // 用户点击确定，跳转到下一个页面
          uni.navigateTo({url:'/teacher/demo/demo'})
        } else if (res.cancel) {
          // 用户点击取消，不执行跳转
          console.log('用户取消跳转')
        }
      }
    })
  }
}
</script>

  <template>
    <view id="dbj">
      <view id="img1"> <image class="photo" src="/static/image/favicon.ico"></image></view>
    <view id="dlk">
      <table>
        <tr>
          <td>姓 名：</td>
          <td><input type="text" placeholder="请输入文本"></td>
        </tr>
        <tr>
          <td>职工号：</td>
          <td><input type="text" placeholder="请输入文本"></td>
        </tr>
        <tr>
          <td>负责班级：</td>
          <td><input type="text" placeholder="请输入文本"></td>
        </tr>
        <tr>
          <td>密 码：</td>
          <td><input type="password" placeholder="请输入密码"></td>
        </tr>
      </table>
    </view>
      <view  @click="tonext3">
        <button class="an" type="primary">
          <text class="text" >开始登录</text>
        </button>
      </view>
    </view>
  </template>

<style scoped>
#img1 {
  display: flex;
  justify-content: center;
}
.photo {
  width: 200px;
  height: 200px;
  position: relative;
  top: 50px;
}
/* 表格样式 */
 #dlk {
   border: 1px solid black;
   margin: 20px;
   text-align: center;
   position: relative;
   top: 150px;
 }
/* 表格内容样式 */
#dlk table {
  width: 100%;
  border-collapse: collapse;/*合并单元格*/
}
/* 表格列样式 */
#dlk table th,
#dlk table td {
  border: 1px solid black;
  padding: 8px;
  text-align: center;/*文本居中*/
}
.an{
  position: relative;
  top: 300px;
  width: 100%;
}
#dbj{
  height: 100%;
  background: #F0F3FA;
  background-size: 100% 100%;
}
</style>
